<template> 
<div id="index">
      <dv-full-screen-container class="bg">
       <dv-loading v-if="loading">Loading...</dv-loading>
         <div v-else >
           <!-- 第一行 -->
            <div class="d-flex">
              <dv-decoration-8 style="width:33.3%;height:50px;" />
              <dv-decoration-5  style="width:33.3%;height:50px;"/>
               <dv-decoration-8 reverse="true" style="width:33.3%;height:50px;" />
            </div>

            <!-- 第二行 -->
            <div class="d-flex"> 
              <div  style="height:320px;">                   
                <!-- <span style="backround-color:#252820"><span class="text">数据分析</span></span> -->
                <topLeft />
                <topLeft/>  
                <div ><bottomLeft style="margin-top:10px;margin-left:;200px;"/></div>
              </div>
              <div  style="height:320px;">                                   
                <topRighter/>
              </div>
              <div  style="height:300px; width:200px;">                      
                <dv-border-box-8 style="height:300px; width:800px;margin-left:10px;"><bottomCenter class="text"/></dv-border-box-8>
              </div>
              <div  style="height:320px;" class="box">                      
                <boxTable/>
              </div>
            </div>

            <!-- 第三行 -->
            <div class="d-flex"> 
              <div style="height:300px;width:800px;margin-left:10px;">
                <dv-border-box-10 ><bottomLeftTable /></dv-border-box-10>
              </div>
              <div style="margin-left:20px;"><bottomRight /></div>
               <div style="height:300px;width:800px;margin-left:20px;">
                <dv-border-box-10 ><topCenter/></dv-border-box-10>
              </div>
            </div>
         </div>
      </dv-full-screen-container> 
      </div>  
</template>

<script>
import bottomLeft from "./bottom-left"
import bottomCenter from "./bottom-center"
import bottomLeftTable from "./bootom-left-table"
import bottomRight from "./bottom-right"
import topLeft from "./top-left"
import topCenter from "./top-center"
import topRighter from "./top-right"
import boxTable from "./boxtable"
import { loading } from '@jiaminghi/data-view'
export default {
    name:"bottomLeft1",
    components:{bottomLeft,bottomCenter,bottomRight,bottomLeftTable,topLeft,topCenter,topRighter,boxTable},
    data(){
      return{ 
        loading:false
      }          
    }
}
</script>
<style scoped>
  .index{
    color:#f9f9f9;
    background-color: #000000;
    width: 100%;
    height: 100%;
  }
  .bg{
     padding: 0.2rem 0.2rem 0 0.2rem;
     background-image: url("../../assets/pageBg.png");
     background-size: cover;
     background-position: center center;
  }
  .d-flex {
  display: flex;
  position: relative;
  margin-top: 50px;
}
 .text {
        margin-left:60px;
      }
  .content-box {
        display: grid;
        grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
      }
    .box{
      position: absolute;
      left:1200px;;
    }
</style>